<!DOCTPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="author" content="蓝景舞阳">
    <title>轮播</title>
    <script src="jquery-1.11.1.min.js"></script>
    <script src="unslider.min.js"></script>
    <script src="toleft.js"></script>
    <style>
        ul,
        ol {
            padding: 0;
        }
        
        .banner {
            position: relative;
            overflow: auto;
            text-align: center;
            width: 1230px;
            margin: 0 auto;
        }
        
        .banner li {
            list-style: none;
        }
        
        .banner ul li {
            float: left;
        }
        
        #b04 ul li img{
            width: 1235px;
            height: 500px;
        }
        
        #b04 .dots {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 20px;
        }
        
        #b04 .dots li {
            display: inline-block;
            width: 10px;
            height: 10px;
            margin: 0 4px;
            text-indent: -999em;
            border: 2px solid #fff;
            border-radius: 6px;
            cursor: pointer;
            opacity: .4;
            -webkit-transition: background .5s, opacity .5s;
            -moz-transition: background .5s, opacity .5s;
            transition: background .5s, opacity .5s;
        }
        
        #b04 .dots li.active {
            background: #fff;
            opacity: 1;
        }
        
        #b04 .arrow {
            position: absolute;
            top: 200px;
        }
        
        #b04 #al {
            left: 15px;
        }
        
        #b04 #ar {
            right: 15px;
        }
    </style>
    <script></script>
</head>

<body>
    <div class="banner" id="b04">
        <ul>
            <li><img src="images/1.jpg" alt=""></li>
            <li><img src="images/2.jpeg" alt=""></li>
            <li><img src="images/3.jpg" alt=""></li>
            <li><img src="images/4.jpg" alt=""></li>
            <li><img src="images/5.png" alt=""></li>
        </ul>
        <a href="javascript:void(0);" class="unslider-arrow04 prev"><img class="arrow" id="al" src="images/arrowl.png" alt="prev" width="20" height="35"></a>
        <a href="javascript:void(0);" class="unslider-arrow04 next"><img class="arrow" id="ar" src="images/arrowr.png" alt="next" width="20" height="37"></a>
    </div>
</body>
<html>